<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css 运动轨迹</title>
    <style>
      html,
      body {
        font-family: -apple-system, "BlinkMacSystemFont", sans-serif;
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: aliceblue;
      }
      .con {
        position: relative;
        width: 300px;
        height: 200px;
        background-color: #ffefc5;
        border-radius: 8px;
        flex-shrink: 0;
      }
      .con::before {
        position: absolute;
        content: "😁";
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: grid;
        place-content: center;
        background-color: #3e65ff;
        color: #fff;
        animation: offset 5s linear infinite;
        z-index: 2;
      }
      .circle::before {
        offset-path: circle(closest-side);
      }
      .circle::after {
        content: "";
        box-sizing: border-box;
        display: block;
        margin: 0 auto;
        aspect-ratio: 1/1;
        height: 100%;
        border-radius: 50%;
        border: 1px dashed #ff336f;
      }
      .ellipse::after {
        content: "";
        box-sizing: border-box;
        display: block;
        height: 100%;
        border-radius: 50%;
        border: 1px dashed #ff336f;
      }
      .ellipse::before {
        offset-path: ellipse(closest-side closest-side);
      }
      .inset::after {
        content: "";
        position: absolute;
        inset: 20px;
        border-radius: 16px;
        border: 1px dashed #ff336f;
      }
      .inset::before {
        offset-path: inset(20px round 16px);
      }
      .polygon::before {
        offset-path: polygon(50% 0, 100% 100%, 0 100%);
      }
      .path::before {
        offset-path: path(
          "M16 39.567C36.479 34.0777 82.9341 33.7783 104.922 76.4954C132.407 129.892 117.317 157.339 192.766 154.844C253.126 152.848 280.072 87.1417 286 54.5383"
        );
      }
      .url::before {
        offset-path: url("#svgPath");
      }
      @keyframes offset {
        to {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>path</h2>
    <div class="con path">
      <svg
        width="300"
        height="200"
        viewBox="0 0 300 200"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M16 39.567C36.479 34.0777 82.9341 33.7783 104.922 76.4954C132.407 129.892 117.317 157.339 192.766 154.844C253.126 152.848 280.072 87.1417 286 54.5383"
          stroke="#FF336F"
          stroke-dasharray="2 2"
        />
      </svg>
    </div>
    <h2>circle</h2>
    <div class="con circle"></div>
    <h2>ellipse</h2>
    <div class="con ellipse"></div>
    <h2>inset</h2>
    <div class="con inset"></div>
    <h2>polygon</h2>
    <div class="con polygon">
      <svg
        width="300"
        height="200"
        viewBox="0 0 300 200"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <polygon
          points="150,0 300,199 0,199"
          stroke="#FF336F"
          stroke-dasharray="2 2"
        />
      </svg>
    </div>
    <h2>url</h2>
    <div class="con url">
      <svg
        width="300"
        height="200"
        viewBox="0 0 300 200"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          id="svgPath"
          d="M64.8437 68.8473C65.2788 68.5288 65.7911 68.2949 66.3695 68.1793L66.4675 68.6697C66.6996 68.6233 66.9456 68.5983 67.2051 68.5983H68.2307V68.0983H70.2821V68.5983H72.3334V68.0983H74.3847V68.5983H76.4361V68.0983H78.4874V68.5983H80.5387V68.0983H82.5901V68.5983H84.6414V68.0983H86.6927V68.5983H88.7441V68.0983H90.7954V68.5983H92.8467V68.0983H94.8981V68.5983H96.9494V68.0983H99.0008V68.5983H101.052V68.0983H103.103V68.5983H105.155V68.0983H107.206V68.5983H109.257V68.0983H111.309V68.5983H113.36V68.0983H115.411V68.5983H117.463V68.0983H119.514V68.5983H121.565V68.0983H123.617V68.5983H124.642C125.124 68.5983 125.592 68.5217 126.033 68.3783L125.879 67.9028C126.681 67.6419 127.383 67.1323 127.879 66.4496L128.283 66.7436C128.556 66.3683 128.773 65.9466 128.922 65.4889L129.239 64.5134L128.764 64.3589L129.397 62.408L129.873 62.5625L130.507 60.6115L130.031 60.457L130.665 58.5061L131.141 58.6606L131.775 56.7097L131.299 56.5552L131.933 54.6042L132.409 54.7587L133.043 52.8078L132.567 52.6533L133.201 50.7024L133.676 50.8569L134.31 48.9059L133.835 48.7514L134.469 46.8005L134.944 46.955L135.578 45.0041L135.103 44.8496L135.736 42.8986L136.212 43.0531L136.846 41.1022L136.37 40.9477L137.004 38.9967L137.48 39.1513L138.114 37.2003L137.638 37.0458L138.272 35.0949L138.748 35.2494L139.381 33.2985L138.906 33.144L139.54 31.193L140.015 31.3475L140.649 29.3966L140.174 29.2421L140.808 27.2911L141.283 27.4457L141.917 25.4947L141.442 25.3402L142.075 23.3893L142.551 23.5438L143.185 21.5928L142.709 21.4383L143.343 19.4874L143.819 19.6419L144.453 17.691L143.977 17.5365L144.611 15.5855L145.087 15.74L145.72 13.7891L145.245 13.6346L145.879 11.6837L146.354 11.8382L146.671 10.8627C146.751 10.6159 146.851 10.3896 146.967 10.1832L146.531 9.93855C146.82 9.42414 147.201 9.00925 147.638 8.69387L147.93 9.09939C148.331 8.81061 148.788 8.61625 149.266 8.51835L149.166 8.0285C149.715 7.91619 150.285 7.91619 150.834 8.0285L150.734 8.51835C151.212 8.61625 151.669 8.81062 152.07 9.0994L152.362 8.69387C152.799 9.00925 153.18 9.42414 153.469 9.93855L153.033 10.1832C153.149 10.3896 153.249 10.6159 153.329 10.8627L153.646 11.8382L154.121 11.6837L154.755 13.6346L154.28 13.7891L154.913 15.74L155.389 15.5855L156.023 17.5365L155.547 17.691L156.181 19.6419L156.657 19.4874L157.291 21.4383L156.815 21.5928L157.449 23.5438L157.925 23.3893L158.558 25.3402L158.083 25.4947L158.717 27.4456L159.192 27.2911L159.826 29.2421L159.351 29.3966L159.985 31.3475L160.46 31.193L161.094 33.1439L160.619 33.2985L161.252 35.2494L161.728 35.0949L162.362 37.0458L161.886 37.2003L162.52 39.1513L162.996 38.9967L163.63 40.9477L163.154 41.1022L163.788 43.0531L164.264 42.8986L164.897 44.8496L164.422 45.0041L165.056 46.955L165.531 46.8005L166.165 48.7514L165.69 48.9059L166.324 50.8569L166.799 50.7024L167.433 52.6533L166.957 52.8078L167.591 54.7587L168.067 54.6042L168.701 56.5552L168.225 56.7097L168.859 58.6606L169.335 58.5061L169.969 60.457L169.493 60.6115L170.127 62.5625L170.603 62.408L171.236 64.3589L170.761 64.5134L171.078 65.4889C171.227 65.9466 171.444 66.3683 171.717 66.7436L172.121 66.4496C172.617 67.1323 173.319 67.6419 174.121 67.9028L173.967 68.3783C174.408 68.5217 174.876 68.5983 175.358 68.5983H176.383V68.0983H178.435V68.5983H180.486V68.0983H182.537V68.5983H184.589V68.0983H186.64V68.5983H188.691V68.0983H190.743V68.5983H192.794V68.0983H194.845V68.5983H196.897V68.0983H198.948V68.5983H200.999V68.0983H203.051V68.5983H205.102V68.0983H207.153V68.5983H209.205V68.0983H211.256V68.5983H213.307V68.0983H215.359V68.5983H217.41V68.0983H219.461V68.5983H221.513V68.0983H223.564V68.5983H225.615V68.0983H227.667V68.5983H229.718V68.0983H231.769V68.5983H232.795C233.054 68.5983 233.3 68.6233 233.533 68.6697L233.631 68.1793C234.209 68.2949 234.721 68.5289 235.156 68.8473L234.861 69.2507C235.259 69.5423 235.585 69.9169 235.826 70.3417L236.261 70.095C236.538 70.5824 236.714 71.1247 236.777 71.6815L236.28 71.7375C236.335 72.2228 236.291 72.7176 236.14 73.1876L236.616 73.3405C236.451 73.8538 236.174 74.3442 235.774 74.7776L235.407 74.4386C235.246 74.6125 235.062 74.7773 234.852 74.9299L234.022 75.5327L234.316 75.9372L232.657 77.143L232.363 76.7385L230.703 77.9442L230.997 78.3487L229.338 79.5545L229.044 79.15L227.384 80.3557L227.678 80.7602L226.018 81.966L225.725 81.5614L224.065 82.7672L224.359 83.1717L222.699 84.3774L222.405 83.9729L220.746 85.1787L221.04 85.5832L219.38 86.7889L219.086 86.3844L217.427 87.5902L217.721 87.9947L216.061 89.2004L215.767 88.7959L214.108 90.0017L214.402 90.4062L212.742 91.6119L212.448 91.2074L210.788 92.4131L211.082 92.8176L209.423 94.0234L209.129 93.6189L207.469 94.8246L207.763 95.2291L206.104 96.4349L205.81 96.0304L204.15 97.2361L204.444 97.6406L202.785 98.8464L202.491 98.4419L200.831 99.6476L201.125 100.052L199.465 101.258L199.172 100.853L197.512 102.059L197.806 102.464L196.146 103.669L195.852 103.265L194.193 104.471L194.487 104.875L192.827 106.081L192.533 105.676L190.874 106.882L191.168 107.287L189.508 108.492L189.214 108.088L188.384 108.691C187.995 108.974 187.661 109.311 187.389 109.686L187.793 109.98C187.297 110.663 187.029 111.487 187.029 112.331L186.529 112.331C186.529 112.795 186.601 113.264 186.75 113.722L187.067 114.697L187.542 114.543L188.176 116.494L187.701 116.648L188.334 118.599L188.81 118.445L189.444 120.396L188.968 120.55L189.602 122.501L190.078 122.347L190.712 124.297L190.236 124.452L190.87 126.403L191.346 126.248L191.979 128.199L191.504 128.354L192.138 130.305L192.613 130.15L193.247 132.101L192.772 132.256L193.406 134.207L193.881 134.052L194.515 136.003L194.039 136.158L194.673 138.109L195.149 137.954L195.783 139.905L195.307 140.059L195.941 142.01L196.417 141.856L197.051 143.807L196.575 143.961L197.209 145.912L197.684 145.758L198.318 147.709L197.843 147.863L198.477 149.814L198.952 149.66L199.586 151.611L199.111 151.765L199.745 153.716L200.22 153.561L200.854 155.512L200.378 155.667L201.012 157.618L201.488 157.463L202.122 159.414L201.646 159.569L202.28 161.52L202.756 161.365L203.39 163.316L202.914 163.471L203.548 165.422L204.023 165.267L204.657 167.218L204.182 167.373L204.499 168.348C204.579 168.595 204.631 168.837 204.659 169.072L205.155 169.013C205.224 169.599 205.16 170.159 204.992 170.671L204.517 170.515C204.363 170.984 204.107 171.409 203.777 171.77L204.146 172.107C203.768 172.521 203.307 172.856 202.797 173.088L202.59 172.633C202.145 172.835 201.661 172.946 201.168 172.948L201.17 173.448C200.63 173.45 200.078 173.338 199.543 173.091L199.752 172.637C199.536 172.538 199.323 172.414 199.113 172.261L198.283 171.658L197.989 172.063L196.33 170.857L196.623 170.453L194.964 169.247L194.67 169.651L193.01 168.446L193.304 168.041L191.645 166.835L191.351 167.24L189.691 166.034L189.985 165.63L188.326 164.424L188.032 164.828L186.372 163.623L186.666 163.218L185.007 162.012L184.713 162.417L183.053 161.211L183.347 160.807L181.687 159.601L181.394 160.005L179.734 158.8L180.028 158.395L178.368 157.189L178.074 157.594L176.415 156.388L176.709 155.984L175.049 154.778L174.755 155.182L173.096 153.977L173.39 153.572L171.73 152.366L171.436 152.771L169.777 151.565L170.07 151.161L168.411 149.955L168.117 150.359L166.457 149.154L166.751 148.749L165.092 147.543L164.798 147.948L163.138 146.742L163.432 146.338L161.773 145.132L161.479 145.536L159.819 144.331L160.113 143.926L158.454 142.72L158.16 143.125L156.5 141.919L156.794 141.515L155.134 140.309L154.84 140.713L153.181 139.508L153.475 139.103L152.645 138.5C152.256 138.217 151.832 138.004 151.391 137.861L151.236 138.336C150.433 138.076 149.567 138.076 148.764 138.336L148.609 137.861C148.168 138.004 147.744 138.217 147.355 138.5L146.525 139.103L146.819 139.508L145.16 140.713L144.866 140.309L143.206 141.515L143.5 141.919L141.84 143.125L141.546 142.72L139.887 143.926L140.181 144.331L138.521 145.536L138.227 145.132L136.568 146.338L136.862 146.742L135.202 147.948L134.908 147.543L133.249 148.749L133.543 149.154L131.883 150.359L131.589 149.955L129.93 151.161L130.223 151.565L128.564 152.771L128.27 152.366L126.61 153.572L126.904 153.977L125.245 155.182L124.951 154.778L123.291 155.984L123.585 156.388L121.926 157.594L121.632 157.189L119.972 158.395L120.266 158.8L118.606 160.005L118.313 159.601L116.653 160.807L116.947 161.211L115.287 162.417L114.993 162.012L113.334 163.218L113.628 163.623L111.968 164.828L111.674 164.424L110.015 165.63L110.309 166.034L108.649 167.24L108.355 166.835L106.696 168.041L106.99 168.446L105.33 169.651L105.036 169.247L103.377 170.453L103.67 170.857L102.011 172.063L101.717 171.658L100.887 172.261C100.677 172.414 100.464 172.538 100.248 172.637L100.457 173.091C99.9215 173.338 99.3696 173.45 98.8305 173.448L98.8322 172.948C98.3385 172.946 97.8545 172.835 97.4099 172.633L97.2031 173.088C96.693 172.856 96.2316 172.521 95.8535 172.107L96.2225 171.77C95.893 171.409 95.6375 170.984 95.4833 170.515L95.0083 170.671C94.8399 170.159 94.7757 169.599 94.8446 169.013L95.3412 169.072C95.3688 168.837 95.421 168.595 95.5012 168.348L95.8182 167.373L95.3426 167.218L95.9765 165.267L96.4521 165.422L97.086 163.471L96.6104 163.316L97.2443 161.365L97.7199 161.52L98.3538 159.569L97.8782 159.414L98.5121 157.463L98.9877 157.618L99.6216 155.667L99.146 155.512L99.7799 153.561L100.255 153.716L100.889 151.765L100.414 151.611L101.048 149.66L101.523 149.814L102.157 147.863L101.682 147.709L102.316 145.758L102.791 145.912L103.425 143.961L102.949 143.807L103.583 141.856L104.059 142.01L104.693 140.059L104.217 139.905L104.851 137.954L105.327 138.109L105.961 136.158L105.485 136.003L106.119 134.052L106.594 134.207L107.228 132.256L106.753 132.101L107.387 130.15L107.862 130.305L108.496 128.354L108.021 128.199L108.654 126.248L109.13 126.403L109.764 124.452L109.288 124.297L109.922 122.347L110.398 122.501L111.032 120.55L110.556 120.396L111.19 118.445L111.666 118.599L112.299 116.648L111.824 116.494L112.458 114.543L112.933 114.697L113.25 113.722C113.399 113.264 113.471 112.795 113.471 112.331L112.971 112.331C112.971 111.487 112.703 110.663 112.207 109.98L112.611 109.686C112.339 109.311 112.005 108.974 111.616 108.691L110.786 108.088L110.492 108.492L108.832 107.287L109.126 106.882L107.467 105.676L107.173 106.081L105.513 104.875L105.807 104.471L104.148 103.265L103.854 103.669L102.194 102.464L102.488 102.059L100.828 100.853L100.535 101.258L98.875 100.052L99.1689 99.6476L97.5093 98.4419L97.2154 98.8464L95.5559 97.6406L95.8498 97.2361L94.1902 96.0304L93.8963 96.4349L92.2367 95.2291L92.5306 94.8246L90.8711 93.6189L90.5772 94.0234L88.9176 92.8176L89.2115 92.4131L87.5519 91.2074L87.258 91.6119L85.5985 90.4062L85.8924 90.0017L84.2328 88.7959L83.9389 89.2004L82.2794 87.9947L82.5732 87.5902L80.9137 86.3844L80.6198 86.7889L78.9602 85.5832L79.2541 85.1787L77.5946 83.9729L77.3007 84.3774L75.6411 83.1717L75.935 82.7672L74.2754 81.5614L73.9815 81.966L72.322 80.7602L72.6159 80.3557L70.9563 79.15L70.6624 79.5545L69.0028 78.3487L69.2967 77.9442L67.6372 76.7385L67.3433 77.143L65.6837 75.9372L65.9776 75.5327L65.1478 74.9299C64.9379 74.7773 64.7535 74.6125 64.593 74.4386L64.2256 74.7776C63.8255 74.3441 63.5486 73.8538 63.3838 73.3405L63.8599 73.1876C63.7089 72.7176 63.6653 72.2228 63.7201 71.7375L63.2232 71.6815C63.286 71.1247 63.4623 70.5824 63.7387 70.095L64.1736 70.3417C64.4146 69.9169 64.7407 69.5423 65.139 69.2507L64.8437 68.8473Z"
          fill="#C1A4FF"
          fill-opacity="0.76"
          stroke="#FF336F"
          stroke-dasharray="2 2"
        />
      </svg>
    </div>
  </body>
</html>
